<template>
  <a-modal v-model:visible="visible" width="90%" :mask-closable="false" @ok="save" @cancel="close"  style="zoom: 1.3">
    <template #title>
      <span style="font-size: 24px">{{ areaData.area_name }}</span>
    </template>
    <a-descriptions :column="1" :value-style="{ paddingRight: 0 }">
      <a-descriptions-item label="区域盘库:">
        <div style="display: flex; justify-content: space-between">
          <button
            v-if="areaData.area_worktype === '满桶区'"
            class="btn-point"
            @click.prevent="areaData.pstatus_points = '需要满桶'"
            :class="areaData.pstatus_points == '需要满桶' ? 'openClick-active' : 'openClick'"
          >
            需要满桶
          </button>
          <button
            v-if="areaData.area_worktype === '满桶区'"
            @click.prevent="areaData.pstatus_points = '满桶拉走'"
            :class="areaData.pstatus_points == '满桶拉走' ? 'openClick-active' : 'openClick'"
          >
            满桶拉走
          </button>
          <button
            v-if="areaData.area_worktype === '空桶区'"
            @click.prevent="areaData.pstatus_points = '需要空桶'"
            :class="areaData.pstatus_points == '需要空桶' ? 'openClick-active' : 'openClick'"
          >
            需要空桶
          </button>
          <button
            v-if="areaData.area_worktype === '空桶区'"
            @click.prevent="areaData.pstatus_points = '空桶拉走'"
            :class="areaData.pstatus_points == '空桶拉走' ? 'openClick-active' : 'openClick'"
          >
            空桶拉走
          </button>
          <button
            v-if="areaData.area_worktype === '复用区'"
            @click.prevent="areaData.pstatus_points = '需要满桶'"
            :class="areaData.pstatus_points == '需要满桶' ? 'openClick-bucket' : 'openbucket'"
          >
            需要满桶
          </button>
          <button
            v-if="areaData.area_worktype === '复用区'"
            @click.prevent="areaData.pstatus_points = '空桶拉走'"
            :class="areaData.pstatus_points == '空桶拉走' ? 'openClick-bucket' : 'openbucket'"
          >
            空桶拉走
          </button>
          <button
            v-if="areaData.area_worktype === '复用区'"
            @click.prevent="areaData.pstatus_points = '全满桶'"
            :class="areaData.pstatus_points == '全满桶' ? 'openClick-bucket' : 'openbucket'"
          >
            全满桶
          </button>
        </div>
      </a-descriptions-item>
      <a-descriptions-item label="区域状态:">
        <button @click.prevent="areaData.status = 1" :class="areaData.status == 1 ? 'openClick-active' : 'openClick'">启用</button>
        <button @click.prevent="areaData.status = 0" :class="areaData.status == 0 ? 'prohibitClick-active' : 'prohibitClick'">禁用</button>
      </a-descriptions-item>
      <a-descriptions-item label="自动模式:">
        <button @click.prevent="areaData.area_auto = 1" :class="areaData.area_auto == 1 ? 'openClick-active' : 'openClick'">全自动</button>
        <button @click.prevent="areaData.area_auto = 0" :class="areaData.area_auto == 0 ? 'prohibitClick-active' : 'prohibitClick'">半自动</button>
      </a-descriptions-item>
    </a-descriptions>
  </a-modal>
</template>

<script setup>
import { ref } from 'vue'
import { Message } from '@arco-design/web-vue'
import useMainStore from '../../../store/main/main'
const mainStore = useMainStore()
const areaData = ref({
  pstatus_points: '',
  status: 1,
  area_auto: 1
})
const visible = ref(false)
function setAreaModalVisible(item) {
  if (item == '') {
    Message.warning(`该${type}未绑定点位`)
  } else {
    areaData.value = item
    visible.value = true
  }
}
const save = () => {
  mainStore.getSmAreaEdit(areaData.value).then(() => {
    Message.success('编辑成功')
    visible.value = false
  })
}
const close = () => {
  mainStore.getSmList()
}
defineExpose({ setAreaModalVisible })
</script>

<style lang="less" scoped>
:deep(.arco-descriptions-item-label-block) {
  color: #121314;
  font-size: 24px;
}
.openClick-active {
  width: 44%;
  height: 50px;
  font-size: 20px;
  font-weight: 500;
  margin-left: 0%;
  border: none;
  border-radius: 5px;
  background-color: #157ae3;
  color: #fff;
}
.prohibitClick-active {
  width: 44%;
  height: 50px;
  font-size: 20px;
  font-weight: 500;
  margin-left: 12%;
  border: none;
  border-radius: 5px;
  background-color: #cf0303;
  color: #fff;
}
.openClick {
  width: 44%;
  height: 50px;
  font-size: 20px;
  font-weight: 500;
  margin-left: 0%;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #fff;
}
.prohibitClick {
  width: 44%;
  height: 50px;
  font-size: 20px;
  font-weight: 500;
  margin-left: 12%;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #fff;
}
.openClick-bucket {
  width: 31%;
  height: 50px;
  font-size: 20px;
  font-weight: 500;
  margin-left: 0%;
  border: none;
  border-radius: 5px;
  background-color: #157ae3;
  color: #fff;
}
.openbucket {
  width: 31%;
  height: 50px;
  font-size: 20px;
  font-weight: 500;
  margin-left: 0%;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #fff;
}
</style>
